<template>
  <section class='f-device-detail'>
    <van-nav-bar class="f-nav-bar" title="修改设备名称" :style="{'background': '#06156A'}">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="pageBack" />
      </template>
    </van-nav-bar>

    <van-form ref="ruleFormRef" @submit="onSubmit" input-align="right" error-message-align="right">
      <van-cell-group>
        <van-field v-model="formData.alias" clearable name="alias" label="设备名称" placeholder="请输入新设备名称"> </van-field>
      </van-cell-group>

      <div class="f-submit-btn">
        <van-button round block type="primary" native-type="submit">确定</van-button>
      </div>
    </van-form>
  </section>
</template>
  
<script>
import { errorDeal, successDeal } from '@/utils/utils';
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      formData: {},
      popup: false,
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '设备详情',
        show: false,
        left: true,
        leftType: 'back',
        bg: ''
      });
    })

    const onSubmit = () => {
      if (!state.formData.alias) {
        errorDeal('请输入设备名称')
        return
      }
      let json = {
        "alias": state.formData.alias,
        "imei": route.query.imei
      }
      api.modifyAlias(json).then(res => {
        successDeal('修改成功')
        setTimeout(() => {
          pageBack()
        }, 500)
      })
    }

    const pageBack = () => {
      router.go(-1)
    }

    return {
      ...toRefs(state),
      onSubmit,
      pageBack
    }
  }
}
</script>
  
<style lang='scss' scoped>
.f-device-detail {
  :deep(.van-nav-bar__title) {
    color: #fff;
  }
  :deep(.van-nav-bar .van-icon) {
    color: #fff;
  }
  .f-submit-btn {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0 62px;
  }
}
</style>